<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/modules/useUserStore";
import { usePageStore } from "@/store/modules/usePageStore";
import { useDark, useToggle } from "@vueuse/core";
import { lighten, darken } from "@/utils/base";
import { ElMessage } from "element-plus";

const STATIC_URL = import.meta.env.VITE_STATIC_URL;

const toggleDark = useToggle(useDark());

const userStore = useUserStore();
const pageStore = usePageStore();

const router = useRouter();

const errorHandler = () => true;
const userName = ref("");
const userAvatar = ref("");

userName.value = userStore.userInfo.user_name;
userAvatar.value = userStore.userInfo.user_avatar;

let mainName = ref(pageStore.mainName);
pageStore.$subscribe((mutation, state) => {
  mainName.value = state.mainName;
});

// 折叠菜单
let isCollapse = ref(false);
const foldMain = () => {
  if (isCollapse.value) {
    isCollapse.value = false;
  } else {
    isCollapse.value = true;
  }
  pageStore.mainFold = isCollapse.value;
};

// 刷新页面
const refreshPage = () => {
  pageStore.Finish = false;
  let timer = setTimeout(() => {
    pageStore.Finish = true;
    clearTimeout(timer);
  }, 100);
};

// 退出登录
const OutLogin = () => {
  // eslint-disable-next-line no-undef
  ElMessageBox.confirm("您确定要退出登录吗？", "系统提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      userStore.clearUserInfo();
      router.replace({ path: "/Login" });
      ElMessage.success("您已退出登录!");
    })
    .catch(() => {});
};

//主题颜色
const el = document.documentElement;
const color = ref(localStorage.getItem("baseColor"));
const predefineColors = ref(["#5A6068", "#008B00", "#8B008B", "#BFBFBF", "#FF0000", "#1e90ff", "#c71585"]);
//根据模式切换颜色
const checkColor = (value, dark) => {
  localStorage.setItem("baseColor", value);
  if (value === null || value === "null" || value === "#436ff6") {
    el.style.removeProperty("--ez-color-primary");
    for (let i = 1; i <= 9; i++) {
      if ((i % 2 != 0 || i == 8) && i != 1) {
        el.style.removeProperty(`--ez-color-primary-light-${i}`);
      }
      el.style.removeProperty(`--ez-color-primary-dark-2`);
    }
    color.value = "#436ff6";
  } else {
    el.style.setProperty("--ez-color-primary", value);
    if (dark) {
      for (let i = 1; i <= 9; i++) {
        if ((i % 2 != 0 || i == 8) && i != 1) {
          el.style.setProperty(`--ez-color-primary-light-${i}`, darken(value, i / 10));
        }
      }
    } else {
      for (let i = 1; i <= 9; i++) {
        if ((i % 2 != 0 || i == 8) && i != 1) {
          el.style.setProperty(`--ez-color-primary-light-${i}`, lighten(value, i / 10));
        }
        el.style.setProperty(`--ez-color-primary-dark-2`, darken(value, 2 / 10));
      }
    }
  }
};

// 暗黑模式
const darkFlag = ref(false);
const switchDark = (value) => {
  if (value) {
    checkColor(color.value, value);
    toggleDark();
  } else {
    checkColor(color.value);
    toggleDark();
  }
};
let roothtml = document.querySelector("html");
if (roothtml.className == "dark") {
  darkFlag.value = true;
  checkColor(color.value, true);
} else {
  checkColor(color.value);
}

// 系统设置
const drawer = ref(false);
</script>
<template>
  <div>
    <div class="systemheader">
      <div class="header-left">
        <el-tooltip effect="dark" :content="isCollapse ? '展开' : '折叠'" placement="bottom">
          <div class="fold-box" @click="foldMain">
            <el-icon v-show="isCollapse">
              <Expand />
            </el-icon>
            <el-icon v-show="!isCollapse">
              <Fold />
            </el-icon>
          </div>
        </el-tooltip>
        <div class="fold-box add_margin" @click="refreshPage()">
          <el-tooltip effect="dark" content="刷新" placement="bottom">
            <div class="fold-box" @click="refreshPage">
              <el-icon>
                <RefreshRight />
              </el-icon>
            </div>
          </el-tooltip>
        </div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: item.Url }" v-for="item in mainName" :key="item.lv">{{ item.Name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="header-right">
        <el-switch
          v-model="darkFlag"
          active-action-icon="Moon"
          inactive-action-icon="Sunny"
          style="--ez-switch-on-color: #4c4d4f"
          @change="switchDark"
        />
        <el-dropdown trigger="click">
          <div class="header-drop">
            <el-avatar :src="STATIC_URL + userAvatar" @error="errorHandler">
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
            </el-avatar>
            <el-text class="mx-2">{{ userName }}</el-text>
            <el-icon>
              <CaretBottom />
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item icon="Setting" @click="drawer = true">系统设置</el-dropdown-item>
              <el-dropdown-item icon="SwitchButton" @click="OutLogin"> 退出登录 </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div>
      <el-drawer v-model="drawer">
        <template #header>
          <h4>系统设置</h4>
        </template>
        <template #default>
          <el-form>
            <el-form-item label="主题颜色">
              <el-color-picker v-model="color" :predefine="predefineColors" size="small" @change="checkColor" color-format="hex" />
            </el-form-item>
          </el-form>
        </template>
      </el-drawer>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.systemheader {
  height: 53px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px 0 16px;
  border-bottom: 1px solid var(--ez-border-color);

  .header-left {
    height: 53px;
    display: flex;
    align-items: center;

    .fold-box {
      height: 53px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;

      &:hover {
        background: var(--ez-color-primary-light-9);
        color: var(--ez-color-primary);
      }
    }

    .add_margin {
      margin-right: 16px;
    }
  }

  .header-right {
    display: flex;
    align-items: center;

    .header-drop {
      margin-left: 20px;
      box-sizing: border-box;
      height: 53px;
      display: flex;
      align-items: center;
      cursor: pointer;

      .ez-avatar {
        width: 32px;
        height: 32px;
        margin-right: 8px;
      }

      .mx-2 {
        margin-right: 8px;
      }
    }

    :deep(.option-box) {
      height: 50px;

      .option {
        height: 20px;
      }
    }
  }
}
</style>
